<template>
	<view class="savepadding">

		<view class="wrap" style="display:flex">
			<view>客户类型</view>
			<u--text text="个人" :color="kehuleixing==0?'#20c3aa':'#333333'" align="center" @click="kehuleixing=0">
			</u--text>

			<u--text text="企业" :color="kehuleixing==1?'#20c3aa':'#333333'" align="center" @click="kehuleixing=1">
			</u--text>
		</view>

		<view class="card wrap">
			<view class="header">
				<view class="title">上传证件照</view>
			</view>
			<view class="desc">上传后自动填入相关信息</view>
			<view class="img-wrap">
				<image :src="formData.idCardImg|mmvImageUrl" @click="chooseimg(1)"></image>
				<image :src="formData.idCardImgBack|mmvImageUrl" @click="chooseimg(2)"></image>
			</view>
			<view class="img-wrap">
				<image :src="formData.cardImgFront|mmvImageUrl" @click="chooseimg(3)"></image>
				<image :src="formData.cardImgBack|mmvImageUrl" @click="chooseimg(4)"></image>
			</view>
			<view class="img-wrap" v-if="kehuleixing==1">
				<image :src="formData.licenseImg|mmvImageUrl" @click="chooseimg(5)"></image>
			</view>
			<view class="desc">请核对您的身份证信息，若信息有误请重新扫描</view>
		</view>

		<view class="wrap" style="margin-bottom: 140upx;">
			<view class="header">
				<view class="title">客户信息</view>
			</view>
			<template v-if="kehuleixing==1">
				<view class="list">
					<view class="label">企业名称*</view>
					<view class="value">
						<u--input border="none" inputAlign="right" v-model="formData.cName" placeholder="请输入" />
					</view>
				</view>
				<view class="list">
					<view class="label">联系人*</view>

					<view class="value">
						<u--input border="none" inputAlign="right" v-model="formData.contactPerson" placeholder="请输入" />
					</view>
				</view>
			</template>
			<template v-if="kehuleixing==0">
				<view class="list">
					<view class="label">客户姓名*</view>
					<view class="value">
						<u--input border="none" inputAlign="right" v-model="formData.name" placeholder="请输入" />
					</view>
				</view>
			</template>
			<view class="list">
				<view class="label">身份证号码</view>
				<view class="value" v-if="formData.idCardNo">
					{{formData.idCardNo}}
				</view>
				<text v-else style="font-size: 30upx;color: #C0C4CC;">请上传证件</text>
			</view>
			<view class="list">
				<view class="label">身份证有效期</view>

				<view class="value" v-if="formData.idCardExpirydate">{{formData.idCardExpirydate}}</view>
				<text v-else style="font-size: 30upx;color: #C0C4CC;">请上传证件</text>
			</view>
			<view class="list">
				<view class="label">联系电话</view>
				<view class="value">
					<u--input border="none" inputAlign="right" type="number" maxlength="11" v-model="formData.contactMobile" placeholder="请输入手机号" />
				</view>
			</view>

			<view class="list">
				<view class="label">银行卡号</view>
				<view class="value">
					<u--input border="none" inputAlign="right" v-model="formData.bankCardNo" placeholder="请输入银行卡号" />
				</view>
			</view>

			<view class="list" @click="goSelItem">
				<view class="label">开户行</view>
				<u--input v-model="formData.bankDeposit" inputAlign="right" placeholder="请选择开户行" disabled
					disabledColor="#FFFFFF" border="none" type="select">
				</u--input>

				<u-icon slot="right" name="arrow-right"></u-icon>
			</view>


			<!-- <view class="list">
		        <view class="label">开户行</view>
		        <view class="value">
		            <text @click="onClickBankDeposit">{{formData.bankDeposit}}</text>
		        </view>
		    </view> -->

			<!-- <view class="list tip">{{bankSelected.quotaExplain}}</view> -->

			<view class="list">
				<view class="label">银行预留手机号</view>
				<view class="value">
					<u--input border="none" inputAlign="right" type="number" maxlength="11" v-model="formData.mobileNo" placeholder="请输入手机号" />
				</view>
			</view>
		</view>

		<view class="bottom-btn bottom">
			<text @click="btnClick">提交</text>
		</view>

	</view>
</template>

<script>
	import {
		addcustomer,
		idCard,
	} from '@/api/custom-api.js';

	import {
		upload
	} from '@/api/user-api.js';

	var BIN = require('../../utils/bankcardinfo.js')

	export default {
		data() {
			return {
				formData: {
					idCardImg: "/static/idCardImg.jpg", // 身份证正面
					idCardImgBack: "/static/idCardImgBack.jpg", // 身份证背面
					cardImgFront: "/static/bankImg.png", // 银行卡正面
					cardImgBack: "/static/bankImgBack.png", // 银行卡背面
					licenseImg: "/static/yingye.png", // 营业执照
					customerName: "", // 姓名
					name: "", //个人-姓名
					cName: "", //企业-名称
					contactPerson: "", // 企业-联系人
					idCardNo: "", // 身份证号
					idCardExpirydate: "", // 身份证失效日期
					driverNo: "", // 驾驶证号
					quasiDrivingType: "", // 准驾车型
					driverValidity: "", // 驾驶证失效日期
					contactMobile: "", // 联系电话
					bankDeposit: "", // 开户行
					bankCardNo: "", // 银行卡号
					mobileNo: "", // 手机号
					verificationCode: "", // 验证码
					customerType: 2, //1企业。2个人
				},
				kehuleixing: 0, // 0 个人 1 企业
			};
		},
		computed: {
			// bankSelected() {
			// 	return this.formData.bankSupportList[this.bankDepositActive] || {};
			// },
		},
		methods: {
			btnClick() {
				if (this.kehuleixing === 0) {
					//个人
					if (uni.$u.test.isEmpty(this.formData.name)) {
						uni.$u.toast('请输入客户姓名')
						return
					}

					this.formData.customerName = this.formData.name;
					this.formData.customerType = 2;

				} else {
					//企业
					if (uni.$u.test.isEmpty(this.formData.cName)) {
						uni.$u.toast('请输入企业名称')
						return
					}

					if (uni.$u.test.isEmpty(this.formData.contactPerson)) {
						uni.$u.toast('请输入联系人')
						return
					}

					this.formData.customerName = this.formData.cName;
					this.formData.customerType = 1;
				}

				uni.showLoading({
					title:'提交中'
				})
				addcustomer(this.formData).then(res => {
					uni.hideLoading()
					uni.$u.toast('提交成功')
					setTimeout(()=>{
						uni.navigateBack()
					}, 1000)
				}).catch(e=>{
					uni.hideLoading()
				})

			},

			chooseimg(type) {
				let that = this;
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					success(res) {
						that.uploadImg(res.tempFilePaths[0], type);
					}
				})
			},

			uploadImg(path, type) {
				uni.showLoading({
					title: '上传中'
				})

				let that = this;

				upload({
					name: 'file',
					filePath: path
				}).then(res => {
					console.log('传成功了', res);
					uni.hideLoading();

					switch (type) {
						case 1:
							that.formData.idCardImg = res.fileName;
							that.checkIdCard(that.formData.idCardImg, 'front');
							break;
						case 2:
							that.formData.idCardImgBack = res.fileName;
							that.checkIdCard(that.formData.idCardImgBack, 'back');
							break;
						case 3:
							that.formData.cardImgFront = res.fileName;
							break;
						case 4:
							that.formData.cardImgBack = res.fileName;
							break;
						case 5:
							that.formData.licenseImg = res.fileName;
							break;
					}

				}).catch(e => {
					uni.hideLoading()
				})
			},
			
			checkIdCard(url, idCardSide){
				idCard({
					url:url.replace('/image-server', ''),
					idCardSide
				}).then(result=>{
					if (idCardSide == 'front') {
					    // this.formData.idCardImg = url;
					    this.formData.name = result.data.name;
					    this.formData.contactPerson = result.data.name;
					    // this.formData.address = result.address;
					    this.formData.idCardNo = result.data.idCard;
					}
					if (idCardSide == 'back') {
					    // this.formData.idCardImgBack = url;
					    // this.formData.startDate = result.startDate;
					    this.formData.idCardExpirydate = result.data.endDate;
					}
				})
			},

			goSelItem() {
				/**
				 *  bankCode: "CITIC"
					bankName: "中信银行"
					cardType: "CC"
					cardTypeName: "信用卡"
				 */
				BIN.getBankBin(this.formData.bankCardNo).then(res => {
					console.log('成功了', res);

					this.formData.bankDeposit = res.bankName
				}).catch(e => {
					this.formData.bankDeposit = ''
					uni.showToast({
						icon: 'none',
						title: e
					})
					console.log('失败了', e);
				})

			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/styles/mmv.scss';

	.card {
		.img-wrap {
			margin-bottom: 26upx;
			display: flex;
			justify-content: space-between;

			image {
				width: 330upx;
				height: 183upx;
			}
		}

		.desc {
			margin-bottom: 20upx;
			font-size: 26upx;
			font-weight: bold;
			color: #999;
		}
	}


	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 2;
	}

	// .input-wrap {
	// 	@include flex;
	// 	height: 77upx;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	font-size: 28upx;
	// 	color: $black33;
	// }

	.list {
		display: flex;
		height: 77upx;
		justify-content: space-between;
		align-items: center;
		font-size: 24upx;
		color: #333;
		margin-bottom: 0;
	}
</style>
